<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link ref="tag" tag="span" class="tags-view-item active" :to="{ path: '/' }">
          电力仪表监控详情
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <!-- <div class="content_small">
        <StrokeTitle2 title="标值监控" class="float margin" style="width: 99%" :isCenter="true">
          <div class="bzjk_box flex_between" slot="content" :data="top1">
            <div class="sjtj_item backgroung flex_between_direction" style="color: rgba(0, 192, 255, 0.9)">
              <div class="title flex_center">{{ top1[0].type }}</div>
              <div class="number flex_center" style="border-bottom: 3px solid rgba(0, 192, 255, 0.9)">
                <div class="num_top">{{ top1[0].value }}</div>
              </div>
            </div>
            <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
            <div class="sjtj_item backgroung flex_between_direction" style="color: #f6ff37">
              <div class="title flex_center">{{ top1[1].type }}</div>
              <div class="number flex_center" style="border-bottom: 3px solid #f6ff37">
                <div class="num_top">{{ top1[1].value }}</div>
              </div>
            </div>
            <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
            <div class="sjtj_item backgroung flex_between_direction" style="color: #ff9900">
              <div class="title flex_center">{{ top1[2].type }}</div>
              <div class="number flex_center" style="border-bottom: 3px solid #ff9900">
                <div class="num_top">{{ top1[2].value }}</div>
              </div>
            </div>
          </div>
        </StrokeTitle2>
      </div> -->

    <div class="content_center">
        <StrokeTitle2 title="功率监控" class="float margin" style="width: 99%" :isBetween="false">
          <div slot="content" class="boxcontent" :data="bottom1">
            <div class="equipment flex_center" v-for="(item, index) in bottom1" :key="index">
              <div class="equipment_lt" @click="handleView(item.id)" v-if="bottom1">
                <div class="eq_lt_top"></div>
                <div class="eq_lt_bottom">{{ item.name }}</div>
              </div>
              <div class="equipment_ct">
                <div class="wugong bc" v-for="(it,ind) in item.data" :key="ind" v-show="ind<3">
                  <span>{{ it.type }}</span>
                  <span class="right">{{ it.value }}</span>
                </div>
               
              </div>
              <div class="equipment_rt" v-show="item.index % 3 != 0"></div>
            </div>
          </div>
        </StrokeTitle2>
      </div>
      <!-- 添加或修改设备信息管理对话框 -->
      <el-dialog v-loading="isLoading" element-loading-text="正在加载..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :title="title" :visible.sync="open" width="700px" append-to-body>
        <el-form ref="form" :model="form" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="设备名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入设备名称" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备编码" prop="code">
                <el-input v-model="form.code" placeholder="请输入设备编码" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备类型" prop="type">
                <treeselect :searchable="false"   v-model="form.type" :options="typeOptions" :show-count="true" placeholder="请选择设备类别" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备厂家" prop="id">
                <!--<el-input v-model="form.eqpFactoryId" placeholder="请输入设备品牌" :disabled="openDisabled" />-->
                <el-select v-model="form.eqpFactoryId" placeholder="- -" clearable size="small" :disabled="openDisabled">
                  <el-option v-for="dict in eqpFactoryOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="设备型号" prop="unitType">
                <el-input v-model="form.unitType" type="textarea" placeholder="- -" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格型号" prop="model">
                <el-input v-model="form.model" placeholder="- -" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属生产线" prop="productLineId">
                <el-select v-model="form.productLineId" placeholder="- -" :disabled="openDisabled" clearable size="small">
                  <el-option v-for="dict in productLineListOptions" :key="dict.id" :label="dict.name" :value="dict.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-select v-model="form.status" placeholder="- -" :disabled="openDisabled">
                  <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电压电压" prop="voltage">
                <el-input v-model="form.voltage" placeholder="- -" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电源赫兹" prop="hertz">
                <el-input v-model="form.hertz" placeholder="- -" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="额定电流" prop="rated">
                <el-input v-model="form.rated" placeholder="- -" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产能力" prop="capacity">
                <el-input v-model="form.capacity" placeholder="- -" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备重量" prop="weight">
                <el-input v-model="form.weight" placeholder="- -" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备尺寸" prop="size">
                <el-input v-model="form.size" placeholder="- -" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="装机功率" prop="power">
                <el-input v-model="form.power" placeholder="- -" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出厂编号" prop="factoryNum">
                <el-input v-model="form.factoryNum" placeholder="- -" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出厂日期" prop="factoryDate">
                <el-date-picker :editable="false" clearable size="small" v-model="form.factoryDate" type="date" value-format="yyyy-MM-dd" placeholder="- -" :disabled="openDisabled">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产日期" prop="makeDate">
                <el-date-picker :editable="false" clearable size="small" v-model="form.makeDate" type="date" value-format="yyyy-MM-dd" placeholder="- -" :disabled="openDisabled">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="购买时间" prop="buyDate">
                <el-date-picker :editable="false" clearable size="small" v-model="form.buyDate" type="date" value-format="yyyy-MM-dd" placeholder="- -" :disabled="openDisabled">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报警提醒时间" prop="alarmDate">
                <el-date-picker :editable="false" clearable size="small" v-model="form.alarmDate" type="date" value-format="yyyy-MM-dd" placeholder="- -" :disabled="openDisabled">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="启用时间" prop="startDate">
                <el-date-picker :editable="false" clearable size="small" v-model="form.startDate" type="date" value-format="yyyy-MM-dd" placeholder="- -" :disabled="openDisabled">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="- -" :disabled="openDisabled" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { GetVal, GetAllElectric, getEqpInfo } from "@/api/parcel/index.js";
import TwoRow from "@/components/echarts/bar/twoRow.vue";
import Gauge2 from "@/components/echarts/pie/gauge2.vue"; //仪表盘
import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
import PieImg3 from "@/components/echarts/pie/img3.vue";
import Treeselect from "@riophae/vue-treeselect";
import {
  selectList,
  factorySelectList,
  getProductlineList,
} from "@/api/basic/eqpInfo/eqpInfo";
export default {
  components: {
    TwoRow,
    Gauge2,
    StrokeTitle2,
    PieImg3,
    Treeselect,
  },
  data() {
    return {
      model: "month",
      top1: [
        { type: "总有功功率", value: 0 },
        { type: "总无功功率", value: 0 },
        { type: "功率因数", value: 0 },
      ], //标值监控
      parentId: "6",
      bottom1: [], //功率监控
      color: ["blue", "orange", "green", "pink"],
      bzjkImgList: [
        require("@/assets/images/echarts/dianyalan.png"),
        require("@/assets/images/echarts/dianliulan.png"),
        require("@/assets/images/echarts/wendulan.png"),
      ],
      //设备点击按钮
      //弹窗是否禁止编辑
      openDisabled: true,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备信息管理表格数据
      eqpInfoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态字典
      statusOptions: [],
      typeOptions: [],
      eqpFactoryOptions: [],
      productLineListOptions: [],
      isLoading: false,
      // 表单参数
      form: {},
    };
  },
  created() {
    // this.getVal(); //标值监控
    this.getAllElectric(); //功率监控
    this.getDicts("eqp_status").then((response) => {
      this.statusOptions = response.data;
    });
    this.getProductlineList();
    this.getTypeList();
    this.getFactoryList();
  },
  methods: {
    //标值监控
    getVal() {
      GetVal(this.parentId).then((res) => {
        if (res.length != 0) {
          this.top1 = res;
        } else {
          this.top1 = [
            { type: "总有功功率", value: 0 },
            { type: "总无功功率", value: 0 },
            { type: "频率", value: 0 },
          ];
        }
      });
    },
    //生产线字典
    getProductlineList() {
      getProductlineList().then((response) => {
        this.productLineListOptions = response.data;
      });
    },
    //设备类型字典
    getTypeList() {
      selectList().then((response) => {
        this.typeOptions = response.data;
      });
    },
    //设备厂家字典
    getFactoryList() {
      factorySelectList().then((response) => {
        this.eqpFactoryOptions = response.rows;
        // console.log(222, this.eqpFactoryOptions);
      });
    },
    //功率监控
    getAllElectric() {
      GetAllElectric().then((res) => {
        this.bottom1 = res;
        for (let i = 0; i < this.bottom1.length; i++) {
          this.bottom1[i].index = Number(i) + 1;
        }
        for (let item of this.bottom1) {
          if (item.data.length == 0) {
            item.data = [
              { type: "总有功功率", value: 0 },
              { type: "总无功功率", value: 0 },
              { type: "功率因数", value: 0 },
            ];
          }
        }
      });
    },
    //设备点击按钮
    handleView(id) {
      this.openDisabled = true;
      this.open = true;
      getEqpInfo(id).then((res) => {
        this.form = res.data;
        this.title = "查看设备信息管理";
        console.log(111, res);
      });
    },
    radioChange() {},
  },
};
</script>


<style lang="scss" scoped>
.boxcontent {
  width: 100%;
  height: 100%;
  overflow: auto;
  word-wrap: break-word;
  word-break: break-all;
  .equipment {
    float: left;
    width: 300px;
    height: 40%;
    // border: 1px solid #3486da;
    // margin: 15px;
    .equipment_lt {
      position: relative;
      width: 120px;
      height: 150px;
      background: #175a91;
      border: 1px solid #009cff;
      cursor: pointer;
      .eq_lt_top {
        width: 120px;
        height: 80px;
        background-image: url("~@/assets/images/echarts/yibiao.png");
        background-size: 100% 100%;
        margin: 23px auto;
      }
      .eq_lt_bottom {
        width: 100%;
        height: 30px;
        text-align: center;
        font-size: 15px;
        line-height: 30px;
        color: #10ffff;
        background: #004986;
        position: absolute;
        bottom: 0px;
        letter-spacing: 1px;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .equipment_ct {
      width: 200px;
      height: 150px;
      // border: 1px solid red;
      margin: 0px 10px;
      .bc {
        width: 100%;
        height: 35px;
        margin: 0px 5px 23px;
        background: #009dffd2;
        background-image: url("~@/assets/images/echarts/组183.png");
        background-size: 100% 100%;
        span {
          display: inline-block;
          font-size: 14px;
          line-height: 35px;
          margin-left: 10px;
        }
        .right {
          float: right;
          color: #06ffff !important;
          margin-right: 10px;
        }
      }
    }
    .equipment_rt {
      width: 3px;
      height: 150px;
      margin-left: 40px;
      // background-color: #fff;
      background-image: url("~@/assets/images/echarts/11.png");
      background-size: 100% 100%;
    }
  }

  @media screen and (max-width: 1000px) {
    .equipment {
      width: 406px;
      margin-left: 13px;
      height: 150px;
      margin-top: 20px;
      .equipment_lt {
        height: 140px;
        .eq_lt_top {
          width: 80px;
          height: 52px;
        }
      }
      .equipment_ct {
        width: 210px;
        height: 140px;
        margin: 0px 5px;
        .bc {
          margin: 0px 5px 18px;
        }
      }
    }
  }
}
.productionDesign_box {
  .content {
    .content_center {
      height: 98%;
    }
    .bzjk_box {
      width: 100%;
      height: calc(100% - 50px);
      // padding: 10px 1%;
      padding: 0px 1%;
      .sjtj_item {
        width: 22%;
        height: 125px;
        margin: 1% 5%;
        background: linear-gradient(
          180deg,
          rgba(14, 81, 141, 0.5) 0%,
          rgba(18, 81, 141, 0.5) 100%
        );
        border: 1px solid #2489ee71;
        padding: 3px;
        position: relative;
        .title {
          font-size: 17px;
          width: 100%;
          height: 44%;
          background: rgba(40, 107, 173, 0.6);
          letter-spacing: 1px;
          font-weight: 400;
        }
        .number {
          width: 100%;
          height: 75%;
          background: rgba(35, 107, 173, 0.6);
          background-image: url("~@/assets/images/echarts/zhuangshi.png");
          background-size: 100% 100%;
          margin-top: 1%;
          //   border-bottom: 3px solid rgba(0, 192, 255, 0.9);
          position: relative;
          .num_top {
            font-size: 30px;
            position: absolute;
            top: 28%;
            font-weight: 500;
            // color: rgba(0, 192, 255, 0.9);
          }
          .num_bottom {
            position: absolute;
            bottom: 1.7%;
            color: white;
            font-size: 15px;
          }
          .num_top_baifenbi {
            position: absolute;
            top: 15%;
            font-size: 40px;
          }
        }
      }
    }
    .yctj_item {
      width: 100%;
      height: 100%;
      // background: red;
    }
    .Echarts {
      height: 100%;
      width: 100%;
    }
  }
}

@media screen and (max-width: 1000px) {
  .content {
    overflow: hidden;
  }
}
</style>